<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器的应用（一）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: absolute;
            left: 0;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: rgb(67, 187, 127);
            position: absolute;
            top: 200px;
        }
        #box3{
            width: 3px;
            height: 300px;
            background-color: black;
            position: absolute;
            left: 800px;
            margin-top: -60px;
        }
    </style>
</head>
<body>
    <br>
    <button id="btn01">点击按钮以后box1向右移动</button>
    <button id="btn02">点击按钮以后box1向左移动</button>
    <button id="btn03">点击按钮以后box2向右移动</button>
    <button id="btn04">测试按钮</button>
    <br>
    <br>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

<script>
  
    // 获取box1
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    // 获取btn01
    var btn01 = document.getElementById("btn01");
    var btn02 = document.getElementById("btn02");
    var btn03 = document.getElementById("btn03");
    var btn04 = document.getElementById("btn04");

    
    // 给按钮创建单击响应函数
    // 点击按钮以后，使box1向右移动（left值增大）
    btn01.onclick = function(){
        move(box1,"left",800,20);
    };
    btn02.onclick = function(){
        move(box1,"left",0,10);
    };
    btn03.onclick = function(){
        move(box2,"left",800,10);
    };
    btn04.onclick = function(){
        move(box2,"left",400,10,function(){
            move(box2,"width",400,10,function(){
                move(box2,"height",200,10,function(){
                    move(box2,"width",200,10,function(){
                    
                    })
                })
            })
        });
    };

    //定义一个变量，用来保存定时器的标识
    /*
        目前我们的定时器的标识由全局变量timer保存，
            所有的正在执行的定时器都在这个变量中保存
    */
    // var timer;

    /*
        参数
        📌    obj:要执行动画的对象
        📌    attr：要执行动画的样式，比如：left top width height
        📌    target:执行动画的距离
        📌    speed：移动的速度(正数向右，负数向左)
        📌    callback：回调函数，这个函数将会在动画执行完毕以后执行
    */
    function move(obj,attr,target,speed,callback){
        // 关闭上一个定时器 ,防止定时器重叠速度异常
        clearInterval(obj.timer);

        // 获取元素目前的位置   ⭐⭐📌
        var current = parseInt(getStyle(obj,"left"));
        // 判断速度的正负值     ⭐⭐📌
        // 如果从0向800移动，则speed为正
        // 如果从800向0移动，则speed为负
        if(current > target){
            // 此时速度应为负值
            speed = -speed;
        }

        // 开启一个定时器，用来执行动画效果
        // 向执行动画的对象中添加一个 timer属性，用来保存自己的定时器的标识
        obj.timer = setInterval(function(){
            // 获取 box1 的原来的left值
            var oldValue = parseInt(getStyle(obj,attr));

            // 在旧值的基础上增加（控制速度）
            var newValue = oldValue + speed;

            // 当 newValue 大于800时，使其等于800，防止等于 801 的情况
            // 向左移动时，需要判断newValue是否小于 target  ⭐⭐📌
            // 向右移动时，需要判断newValue是否大于 target
            if((speed<0 && newValue<target) || (speed>0 && newValue>target)){
                newValue = target;
            }
            obj.style[attr] = newValue + "px";

            // 判断 newValue 是否等于800，
            if(newValue == target){
                // 如符合判断则关闭定时器
                clearInterval(obj.timer);
                //动画执行完毕，调用回调函数
                callback && callback();
            }
        }, 30);
    }



    // 定义一个函数，返回一个元素的 当前样式属性值
    function getStyle(obj,name){
        // 判断浏览器是否有该方法，使其兼容不同的浏览器
        if(window.getComputedStyle){
            // getComputedStyle() 返回一个元素的 当前样式属性值
            return getComputedStyle(obj,null)[name];
        }else{
            // 同上 写法不同（兼容IE8）
            return obj.currentStyle[name];
        }
    }
</script>
